<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档的加载</title>
    <script>
        window.onload=function () {
            function MyClick(bStr,fun) {
                var bStr=document.getElementById(bStr);
                bStr.onclick=fun;
            }
//查找#bj节点
            MyClick("btn01",function () {
                var bj=document.getElementById("bj");
                alert(bj.innerHTML);
            });
//查找所有li节点
            MyClick("btn02",function () {
                var lis=document.getElementsByTagName("li");
                for (var i=0;i<lis.length;i++){
                    alert(lis[i].innerHTML);
                }
            });
//查找name=gender的所有节点
            MyClick("btn03",function () {
                var names=document.getElementsByName("gender");
                for (var i=0;i<names.length;i++){
                    alert(names[i].value);
                }
            });
//查找#city下所有li节点
            MyClick("btn04",function () {
                var city=document.getElementById("city");
                var lis=city.getElementsByTagName("li");
                for (var i=0;i<lis.length;i++){
                    alert(lis[i].innerHTML);
                }
            });
//返回#city的所有子节点
            MyClick("btn05",function () {
                var city=document.getElementById("city");
                var ccn=city.childNodes;
                alert(ccn.length);
                for (var i=0;i<ccn.length;i++){
                    alert(ccn[i])
                }
            });
//返回#phone的第一个子节点
            MyClick("btn06",function () {
                var phone=document.getElementById("phone");
               var firc= phone.firstChild;
               alert(firc.innerHTML);
            });
// 返回#bj的父节点
            MyClick("btn07",function () {
                var bj=document.getElementById("bj");
                var bjf=bj.parentNode;
                alert(bjf.id)
            });
//返回#android的前一个兄弟节点
            MyClick("btn08",function () {
                var android=document.getElementById("android");
                var aps=android.previousSibling;
                alert(aps.innerHTML);
            });
//返回#username的value属性值
            MyClick("btn09",function () {
                var username=document.getElementById("username");
                alert(username.value);
            });
//设置#username的value属性值
            MyClick("btn10",function () {
                var username=document.getElementById("username");
                username.value="早上吃饭了么？";
            });
//返回#bj的文本值
            MyClick("btn11",function () {
                var bj=document.getElementById("bj");
                alert(bj.innerText);
            });
        }
    </script>
    <link rel="stylesheet" type="text/css" href="../style/css.css" />
</head>
<body>
<script>
    /*一.onload事件会在整个页面加载完成之后才触发
    *       为window绑定一个onload事件 这样事件对象的响应函数将会在页面加载完成之后才触发
    *       这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
    *二.获取元素节点
    *     通过document对象调用
    *          1.getElementById()
    *               通过id属性获取一个元素节点对象
    *           2.getElementsByTagName()
    *               通过标签名获取一组元素节点对象
    *           3.getElementsByName()
    *               通过name属性获取一组元素节点对象
    *                   innerHTML用于获取元素内部的HTML代码的 对于自结束标签,这个属性没有意义
    *               如果元素在读取元素节点属性,直接用 元素.属性名
    *                   例如元素.id
    *                       元素.value
    *                       元素.name 等
    *                   注意:class属性不能采用这种方式,读取class属性时，需要使用
    *                       元素.className
    * 三.获取元素节点的子节点
    *   通过具体的元素节点调用的
    *       1.getElementsByTagName()
    *            方法  返回当前节点的指定标签名后代节点
    *       2.childNodes
    *           属性， 表示当前节点的所有子节点
    *           会获取包括文本在内的所有节点，根据DOM标签与标签之间的空白也会当成子节点
    *           注意:在IE8及一下的浏览器中,不会将空白文本当成子节点
    *               所以该属性在IE8中会返回4个子元素而其他浏览器是9个
    *        3.children属性可以获取当前元素的所有子元素
    *        4.firstChild
    *           属性， 表示当前节点的第一个子节点   包括空白文本节点
    *       5.firstElementChild 获取当前元素的第一个子元素仅支持IE8以上的版本
    *       6.lastChild
    *           属性,表示当前节点的最后一个子节点
    * 四.获取父节点和兄弟节点
    *       通过具体的节点调用
    *       1.parentNode
    *              属性  表示当前节点的父节点
    *       2.previousSibling
    *               属性 表示当前节点的前一个兄弟节点
    *       3.nextSibling
    *               属性 表示当前节点的后一个兄弟节点
    *
    *
    * */
</script>

<div id="total">
    <div class="inner">
        <p>
            你喜欢哪个城市?
        </p>

        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
        </ul>

        <br>
        <br>

        <p>
            你喜欢哪款单机游戏?
        </p>

        <ul id="game">
            <li id="rl">红警</li>
            <li>实况</li>
            <li>极品飞车</li>
            <li>魔兽</li>
        </ul>

        <br />
        <br />

        <p>
            你手机的操作系统是?
        </p>

        <ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
    </div>

    <div class="inner">
        gender:
        <input class="hello" type="radio" name="gender" value="male"/>
        Male
        <input class="hello" type="radio" name="gender" value="female"/>
        Female
        <br>
        <br>
        name:
        <input type="text" name="name" id="username" value="abcde"/>
    </div>
</div>
<div id="btnList">
    <div><button id="btn01">查找#bj节点</button></div>
    <div><button id="btn02">查找所有li节点</button></div>
    <div><button id="btn03">查找name=gender的所有节点</button></div>
    <div><button id="btn04">查找#city下所有li节点</button></div>
    <div><button id="btn05">返回#city的所有子节点</button></div>
    <div><button id="btn06">返回#phone的第一个子节点</button></div>
    <div><button id="btn07">返回#bj的父节点</button></div>
    <div><button id="btn08">返回#android的前一个兄弟节点</button></div>
    <div><button id="btn09">返回#username的value属性值</button></div>
    <div><button id="btn10">设置#username的value属性值</button></div>
    <div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>